<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">客户支持与服务</div>
        <div class="forum-header-content">我们的团队致力于为您提供实现目标所需的知识和资源。</div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/business/contact')">联系我们获取更多信息</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img not-shodow" src="/images/business/support/1.jpg" alt="" />
      </div>
    </section>

    <section class="team-section">
      <div class="container">
        <div class="team-title">确保我们客户的成功</div>
        <div class="team-list">
          <div class="team-item" v-for="(item, index) in supportList" :key="index">
            <div class="team-item-title">{{ item.title }}</div>
            <div class="team-item-description">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img
          class="img-section-img cursor"
          @click="jump('/business/contact')"
          src="/images/business/support/2.jpg"
          alt=""
        />
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  let supportList = [
    {
      title: "专职的项目经理",
      desc: "我们敬业的销售经理团队将指导您完成流程的每一步，从集成您的3D工作流程到创建交互式设计。",
    },
    {
      title: "工作室入职",
      desc: "AnyRender提供了一个全面的入职计划，帮助您熟悉我们的工作室功能、流程、术语和资源，以帮助您继续。",
    },
    {
      title: "技术支持",
      desc: "我们经验丰富的团队在这里促进AnyRender的无故障升级。我们简化的导入和发布流程保证，您将能够立即分发您的第一个设计。",
    },
    {
      title: "见解和提示",
      desc: "率先发现AnyRender正在开发的创新解决方案以及它们如何改善您的工作流程。我们将为您提供测试版和新功能的实用指导。",
    },
    {
      title: "组建你的团队",
      desc: "从跨部门到整合外部团队，我们将与您合作，建立最佳的工作空间结构、访问管理和共享选项。",
    },
    {
      title: "设计解决方案",
      desc: "我们可以提供额外的工作台强度，以确保您已经探索了交互和动画可以为优化您的设计概念带来的所有可能性。",
    },
  ];
  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        width: 50%;
        line-height: 1.6;
        text-align: center;
        font-size: 16px;
        color: #585858;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
      }
    }
  }

  .find-btn {
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    &.left {
      justify-content: flex-start;
    }
    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 6px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      &:hover {
        background-color: transparent;
        color: #703ffa;
      }
      &.transparent {
        color: #703ffa;
        background-color: transparent;

        &:hover {
          background-color: #703ffa;
          color: #fff;
        }
      }
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .img-section {
    padding: 40px 0 40px;
  }
  .img-section-img {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    object-fit: cover;
    box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
    &.not-shodow {
      box-shadow: none;
    }
    &.cursor {
      cursor: pointer;
    }
  }

  .team-section {
    padding: 40px 0 90px;
    .container {
      padding: 1px 16px;
      .team-title {
        font-size: 44px;
        font-weight: 500;
        text-align: center;
        color: #000;
        margin: 50px auto;
        letter-spacing: 10px;
      }
      .team-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
        .team-item {
          width: calc(33.33% - 20px);
          .team-item-title {
            font-size: 22px;
            font-weight: 500;
            color: #000;
            margin-bottom: 12px;
          }
          .team-item-description {
            font-size: 16px;
            color: #585858;
          }
        }
      }
    }

    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      padding: 30px 16px 80px;
      .container {
        .team-title {
          font-size: 36px;
          margin: 36px auto;
          letter-spacing: 8px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 18px;
            }
            .team-item-description {
              font-size: 16px;
            }
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 24px 16px 60px;
      .container {
        .team-title {
          font-size: 32px;
          margin: 32px auto;
          letter-spacing: 6px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 18px;
            }
            .team-item-description {
              font-size: 14px;
            }
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 20px 16px 50px;
      .container {
        .team-title {
          font-size: 28px;
          margin: 28px auto;
          letter-spacing: 4px;
        }
        .team-list {
          flex-wrap: wrap;
          .team-item {
            width: 100%;
            .team-item-title {
              font-size: 16px;
            }
            .team-item-description {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
